<template>
  <div class="bgColor">
    <img class="bgColors" src="../../assets/sweep/ft.jpg" />
    <img class="bgColorsauto" src="../../assets/sweep/fts.jpg" />

    <!-- <div class="progress-bar">
      <div :style="{ width: progress + '%' }" class="progress"></div>
    </div> -->
    <!-- <myProgress  class="my_ucharts" :proList="proListThree" /> -->
    <div >
        <div
      id="GameDiv"
      cc_exact_fit_screen="true"
      style="display: flex; justify-content: center; align-items: center; transform: rotate(0deg); margin: 0px auto; width: 390px; height: 844px;"
    >
      <div
        id="Cocos3dGameContainer"
        style="width: 100%; height: 100%; transform: rotate(0deg);"
      >
        <canvas
          id="GameCanvas"
          oncontextmenu="event.preventDefault()"
          tabindex="99"
          width="780"
          height="1688"
        ></canvas>
      </div>
    </div>
    <div
      id="LogoPage"
      style="position: absolute; width: 100%; height: 100%; background-color: black; display: none;"
    >
      <div
        id="LogoDiv"
        style="position: absolute; left:50%; top:50%; transform: translate(-50%, -50%)"
      >
        <picture id="LogoImage">
          <div
            id="LogoImageProgress1"
            style="position: absolute; width: 100%; top: 94%; height: 6%; border-radius: 10px; background-color: rgb(45, 38, 28);"
          ></div>
          <div
            id="LogoImageProgress2"
            style="position: absolute; width: 0%; top: 94%; height: 6%; border-radius: 10px; background-color: rgb(219, 177, 76); animation-name: progress; animation-duration: 2s; animation-timing-function: ease-out; animation-fill-mode: forwards;"
          ></div>
          <source srcset="../logo/jili_20231227.mp4" type="video/mp4"/>
          <source srcset="../logo/jili_20231227.avif" type="image/avif"/>
          <source srcset="../logo/jili_20231227.webp" type="image/webp"/>
          <img src="../logo/jili_20231227.png" style="height: 83%;"
        /></picture>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// import myProgress from '@/components/myProgress/myProgress.vue';
const progress = ref(50);
const proListThree =ref( [
				{ name: 'loading....', value: 12 } 
				]);
</script>

<style lang="less" scoped>
.bgColor {
  //   background-image: url(../../assets/sweep/ft.jpg);
  //   background-size: cover;
  //   height: 100vh;
  background-color: rgb(27, 51, 97);
  //   height: 99vh;
}
.bgColors {
  width: 100%;
  height: 50vh;
  display: flex;
}
.progress-bar {
  width: 200px;
  margin: 0 auto;
  height: 10px; /* 设置进度条高度 */
  background-color: #1a2846; /* 设置背景颜色 */
  border-radius: 4px; /* 设置边角半径 */
}

.progress {
  height: 100%; /* 设置进度条内部元素高度为100% */
  background-color: #3d8bc6; /* 设置进度条颜色 */
  transition: width 0.3s ease; /* 添加动画效果 */
}
.bgColorsauto {
  height: auto;
  width: 100%;
}


</style>
